<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单中心</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/rest.css" />
		<link rel="stylesheet" type="text/css" href="css/chakan.css" />
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style>
			table {
				width: 100%;
				margin-top: 10px;
				border-collapse: collapse;
			}
			
			.table01 {
				border: 1px solid #ddd;
			}
			/*tr,td,th{
				border:1px solid #ddd;
				
			}*/
			
			tr {
				height: 35px;
			}
			tr:hover{
				background:#eee;
			}
			td,
			th {
				padding-left: 10px;
			}
			
			.btn_a {
				padding: 0;
				font-size: 12px;
			}
			
			.del {
				cursor: pointer;
			}
			
			.inp02 {
				padding: 5px 10px;
				border: 1px solid #ddd;
				margin-top: 10px;
			}
			
			.btn01 {
				border: 0;
				background: none;
				padding: 5px 15px;
				background: #187FDE;
				color: #fff;
			}
			.img-a{
				width: 280px;
				height: auto;
				overflow: hidden;
			}
			
			.img-a img {
				margin-top:5px;
				margin-right: 5px;
				width: 80px;
				height: 80px;
				overflow: hidden;
			}
			
		</style>
	</head>

	<body>
		<div class="container-fluid navi" style="margin-top:10px;">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#tab1" data-toggle="tab">未付款</a></li>
				<li><a href="#tab2" data-toggle="tab">已付款</a></li>
				<li><a href="#tab3" data-toggle="tab">未发货</a></li>
				<li><a href="#tab4" data-toggle="tab">已发货</a></li>
				<li><a href="#tab5" data-toggle="tab">已收货</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active " id="tab1">
					<div>
						<input type="text" class="inp02" placeholder="请输入订单号" /><button class="btn01" /> 搜索</button>
					</div>
					<table border="1" class="table01 table">
						<tr class="info">
							<th>订单号</th>
							<th>下单时间</th>
							<th>收货人</th>
							<th>总金额</th>
							<th>订单状态</th>
							<th>操作</th>
						</tr>

						<tr>
							<td>2016112155944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal01">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>

						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal02">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal03">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal04">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
					</table>
				</div>
				<div class="tab-pane" id="tab2">
					<div>
						<input type="text" class="inp02" placeholder="请输入订单号" /><button class="btn01" /> 搜索</button>
					</div>
					<table border="1" class="table01 table">
						<tr class="info">
							<th>订单号</th>
							<th>下单时间</th>
							<th>收货人</th>
							<th>总金额</th>
							<th>订单状态</th>
							<th>操作</th>
						</tr>

						<tr>
							<td>2016112155944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal01">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>

						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal02">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal03">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已付款
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal04">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
					</table>
				</div>
				<div class="tab-pane" id="tab3">
					<div>
						<input type="text" class="inp02" placeholder="请输入订单号" /><button class="btn01" /> 搜索</button>
					</div>
					<table border="1" class="table01 table">
						<tr class="info">
							<th>订单号</th>
							<th>下单时间</th>
							<th>收货人</th>
							<th>总金额</th>
							<th>订单状态</th>
							<th>操作</th>
						</tr>

						<tr>
							<td>2016112155944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal01">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>

						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal02">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal03">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								未发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal04">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
					</table>
				</div>
				<div class="tab-pane" id="tab4">
					<div>
						<input type="text" class="inp02" placeholder="请输入订单号" /><button class="btn01" /> 搜索</button>
					</div>
					<table border="1" class="table01 table">
						<tr class="info">
							<th>订单号</th>
							<th>下单时间</th>
							<th>收货人</th>
							<th>总金额</th>
							<th>订单状态</th>
							<th>操作</th>
						</tr>

						<tr>
							<td>2016112155944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal01">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>

						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏</td>
							<td>100.00</td>
							<td>
								已发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal02">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal03">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已发货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal04">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
					</table>
				</div>
				<div class="tab-pane" id="tab5">
					<div>
						<input type="text" class="inp02" placeholder="请输入订单号" /><button class="btn01" /> 搜索</button>
					</div>
					<table border="1" class="table01 table">
						<tr class="info">
							<th>订单号</th>
							<th>下单时间</th>
							<th>收货人</th>
							<th>总金额</th>
							<th>订单状态</th>
							<th>操作</th>
						</tr>

						<tr>
							<td>2016112155944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已收货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal01">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>

						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏</td>
							<td>100.00</td>
							<td>
								已收货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal02">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已收货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal03">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
						<tr>
							<td>20161121545944</td>
							<td>2016-11-21 18:25</td>
							<td>敏敏155854456老地方</td>
							<td>100.00</td>
							<td>
								已收货
							</td>
							<td>
								<span class="btn btn_a" data-toggle="modal" data-target="#myModal04">详细</span>&nbsp;|&nbsp;<span class="del">删除</span>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<!--弹框01-->

			<div class="modal fade" id="myModal01" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
							<!--<h4 class="modal-title">温馨提示</h4>-->
						</div>
						<div class="modal-body">
							<div class="bootbox-body">
								<div class="bootbox-content">
									<table border="0" cellspacing="" cellpadding="">
										<tr>
											<td width="20%" class="td01">订单号:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>下单时间:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>收货人:</td>
											<td>王明</td>
										</tr>
										<tr>
											<td>联系电话:</td>
											<td>1866154852</td>
										</tr>
										<tr>
											<td>收货地址:</td>
											<td>临沂市兰山区</td>
										</tr>
										<tr>
											<td>总金额:</td>
											<td>200:00</td>
										</tr>
										<tr>
											<td>状态:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>备注:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td rowspan="2">商品:</td>
											<td>商品名称</td>
											<td>商品价格</td>
											<td>商品数量</td>
										</tr>
										<tr>

											<td>马卡龙</td>
											<td>79.00</td>
											<td>1</td>
										</tr>
										<tr>
											<td>图片</td>
											<td><div class="img-a"><img src="amcharts/patterns/chalk/pattern1r.jpg" /></div></td>
										</tr>
									</table>
								</div>

							</div>
						</div>
						<!--<div class="modal-footer bootbox-footer" style="text-align:center!important;">
							
								<button data-bb-handler="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button data-bb-handler="confirm" type="button" data-dismiss="modal" class="btn btn-primary">确认</button>
							</div>-->
					</div>
				</div>
			</div>
			<!--弹框01-->
			<!--弹框02-->

			<div class="modal fade" id="myModal02" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
							<!--<h4 class="modal-title">温馨提示</h4>-->
						</div>
						<div class="modal-body">
							<div class="bootbox-body">
								<div class="bootbox-content">
									<table border="0" cellspacing="" cellpadding="">
										<tr>
											<td width="20%" class="td01">订单号:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>下单时间:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>收货人:</td>
											<td>王明</td>
										</tr>
										<tr>
											<td>联系电话:</td>
											<td>1866154852</td>
										</tr>
										<tr>
											<td>收货地址:</td>
											<td>临沂市兰山区</td>
										</tr>
										<tr>
											<td>总金额:</td>
											<td>200:00</td>
										</tr>
										<tr>
											<td>状态:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>备注:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td rowspan="2">商品:</td>
											<td>商品名称</td>
											<td>商品价格</td>
											<td>商品数量</td>
										</tr>
										<tr>

											<td>马卡龙</td>
											<td>79.00</td>
											<td>1</td>
										</tr>
										<tr>
											<td>图片</td>
											<td><div class="img-a"><img src="amcharts/patterns/chalk/pattern1r.jpg" /><img src="amcharts/patterns/chalk/pattern1r.jpg" /><img src="amcharts/patterns/chalk/pattern1r.jpg" /><img src="amcharts/patterns/chalk/pattern1r.jpg" /><img src="amcharts/patterns/chalk/pattern1r.jpg" /><img src="amcharts/patterns/chalk/pattern1r.jpg" /></div></td>
										</tr>
									</table>
								</div>

							</div>
						</div>
						<!--<div class="modal-footer bootbox-footer" style="text-align:center!important;">
							
								<button data-bb-handler="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button data-bb-handler="confirm" type="button" data-dismiss="modal" class="btn btn-primary">确认</button>
							</div>-->
					</div>
				</div>
			</div>
			<!--弹框02-->
			<!--弹框03-->

			<div class="modal fade" id="myModal03" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
							<!--<h4 class="modal-title">温馨提示</h4>-->
						</div>
						<div class="modal-body">
							<div class="bootbox-body">
								<div class="bootbox-content">
									<table border="0" cellspacing="" cellpadding="">
										<tr>
											<td width="20%" class="td01">订单号:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>下单时间:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>收货人:</td>
											<td>王明</td>
										</tr>
										<tr>
											<td>联系电话:</td>
											<td>1866154852</td>
										</tr>
										<tr>
											<td>收货地址:</td>
											<td>临沂市兰山区</td>
										</tr>
										<tr>
											<td>总金额:</td>
											<td>200:00</td>
										</tr>
										<tr>
											<td>状态:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>备注:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td rowspan="2">商品:</td>
											<td>商品名称</td>
											<td>商品价格</td>
											<td>商品数量</td>
										</tr>
										<tr>

											<td>马卡龙</td>
											<td>79.00</td>
											<td>1</td>
										</tr>
										<tr>
											<td>图片</td>
											<td><div class="img-a"><img src="amcharts/patterns/chalk/pattern1r.jpg" /></div></td>
										</tr>
									</table>
								</div>

							</div>
						</div>
						<!--<div class="modal-footer bootbox-footer" style="text-align:center!important;">
							
								<button data-bb-handler="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button data-bb-handler="confirm" type="button" data-dismiss="modal" class="btn btn-primary">确认</button>
							</div>-->
					</div>
				</div>
			</div>
			<!--弹框03-->
			<!--弹框04-->

			<div class="modal fade" id="myModal04" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
							<!--<h4 class="modal-title">温馨提示</h4>-->
						</div>
						<div class="modal-body">
							<div class="bootbox-body">
								<div class="bootbox-content">
									<table border="0" cellspacing="" cellpadding="">
										<tr>
											<td width="20%" class="td01">订单号:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>下单时间:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>收货人:</td>
											<td>王明</td>
										</tr>
										<tr>
											<td>联系电话:</td>
											<td>1866154852</td>
										</tr>
										<tr>
											<td>收货地址:</td>
											<td>临沂市兰山区</td>
										</tr>
										<tr>
											<td>总金额:</td>
											<td>200:00</td>
										</tr>
										<tr>
											<td>状态:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td>备注:</td>
											<td>201611225648</td>
										</tr>
										<tr>
											<td rowspan="2">商品:</td>
											<td>商品名称</td>
											<td>商品价格</td>
											<td>商品数量</td>
										</tr>
										<tr>

											<td>马卡龙</td>
											<td>79.00</td>
											<td>1</td>
										</tr>
										<tr>
											<td>图片</td>
											<td><div class="img-a"><img src="amcharts/patterns/chalk/pattern1r.jpg" /></div></td>
										</tr>
									</table>
								</div>

							</div>
						</div>
						<!--<div class="modal-footer bootbox-footer" style="text-align:center!important;">
							
								<button data-bb-handler="cancel" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button data-bb-handler="confirm" type="button" data-dismiss="modal" class="btn btn-primary">确认</button>
							</div>-->
					</div>
				</div>
			</div>
			<!--弹框04-->

		</div>
	</body>

</html>